<template>
    <div class="manage-select">
        <div class="main-head has-radios flex-between container-fluid">
            <div class="title"><h1>{{ $t('pro.settings.adminNav')}}</h1></div>
        </div>
        <div class="content container-fluid">
            <div class="portlet">
                <a-tabs :defaultActiveKey="1" v-model="navValue" @change="callback">
                    <a-tab-pane v-for="(item) in $t('pro.settings.navs')"
                                :tab="item.name"
                                :key="item.key">
                        <div class="tools">
                            <a-form layout="inline" :form="form" @submit="handleSubmit" v-show="!(navValue == 5 && NavList5.length >= 1)">
                                <a-form-item v-if="!(navValue == 5 || navValue == 4)">
                                    <a-input
                                        v-decorator="[
                                          'name',{ rules: [{ required: true, message: $t('pro.reports.alertModalForm.nameRTitle') }] },]"
                                        :placeholder="$t('pro.settings.navsColumns[0].title')"
                                        @change="handleDisabled"
                                    >
                                        <a-icon slot="prefix" type="key" style="color:rgba(0,0,0,.25)"/>
                                    </a-input>
                                </a-form-item>
                                <a-form-item>
                                    <a-input
                                        v-decorator="[
                                        'iabId',
                                        { rules: [{ required: true, message: $t('pro.reports.alertModalForm.keyRTitle') }] },
                                        ]"
                                        :placeholder="$t('pro.settings.navsColumns[1].title')"
                                        @change="handleDisabled"
                                    >
                                        <a-icon slot="prefix" type="select" style="color:rgba(0,0,0,.25)"/>
                                    </a-input>
                                </a-form-item>
                                <a-form-item>
                                    <!-- :disabled="!disabled" -->
                                    <a-button type="primary" html-type="submit" :loading="confirming">
                                        {{ $t('pro.settings.addContent') }}
                                    </a-button>
                                </a-form-item>
                                <a-form-item>
                                    <a-popconfirm v-show="rowSelection.all.length > 0" :title="$t('pro.settings.determineDel')" @confirm="() => listDelete">
                                        <a-button type="danger">{{ $t('pro.settings.allRemove') }}</a-button>
                                    </a-popconfirm>
                                </a-form-item>
                            </a-form>
                        </div>
                        <!-- table表单 -->
                        <a-table
                            :rowKey="record => record.id"
                            :columns="(navValue == 5 || navValue == 4) ? getColumnsNotValue : getColumns"
                            :dataSource="getTableList"
                            :loading="listLoading"
                            :pagination="false"
                            :rowSelection="rowSelection"
                            :scroll="{ x: 600 }"
                            bordered
                        >
                            <template
                                v-for="col in ['name', 'iabId']"
                                :slot="col"
                                slot-scope="text, record, index"
                            >
                                <div :key="col">
                                    <a-input
                                        v-if="record.editable"
                                        class=""
                                        style="margin: -5px 0"
                                        :value="text"
                                        @change="e => handleChange(e.target.value, record.id, col)"
                                    />
                                    <template v-else>{{text}}</template>
                                </div>
                            </template>

                            <div slot="action" slot-scope="text, record">
                                <!--<a-button type="dashed" shape="circle" icon="edit"></a-button>-->
                                <div class="editable-row-operations" style="display: inline-block">
                                    <span v-if="record.editable">
                                      <a @click="() => save(record)">Save</a>
                                    </span>
                                    <span v-else>
                                        <a-button class="dark-b-999" type="dashed" shape="circle" icon="edit" @click="() => edit(record.id)"/>
                                    </span>
                                </div>
                                &nbsp;
                                <a-button type="danger" v-show="navValue != 5" class="dark-b-999" shape="circle" @click="removeNav(record.id)" icon="delete"></a-button>
                            </div>
                        </a-table>
                    </a-tab-pane>

                </a-tabs>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        addCategories,
        getAllDataCategories,
        delCategories,
        getCategories,
        changeCategories
    } from "@/api/all-categories";

    const rowSelection = {
        onChange: function(selectedRowKeys, selectedRows) {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            this.all = selectedRows;
        },
        all: []
    };

    export default {
        name: "ManageSelect2",
        data() {
            return {
                navValue: 4,
                listLoading: false,
                form: this.$form.createForm(this),
                rowSelection,

                confirming: false,
                NavList1: [],
                NavList2: [],
                NavList3: [],
                NavList4: [],
                NavList5: [],
                NavList6: [],
                NavList7: [], //连接类型
                disabled: false
            }
        },
        methods: {
            callback(key) {
                this.getAllData(key)
                this.form.resetFields();
            },

            handleChange(value, id, column) {
                const newData = [...this['NavList'+this.navValue]];
                const target = newData.filter(item => id === item.id)[0];
                if (target) {
                    target[column] = value;
                    this['NavList'+this.navValue] = newData;
                }
            },
            edit(id) {
                const newData = [...this['NavList'+this.navValue]];
                const target = newData.filter(item => id === item.id)[0];
                if (target) {
                    target.editable = true;
                    this['NavList'+this.navValue] = newData;
                }
            },
            /* 在表单输入完成点击Save后开始修改 */
            save(params) {
                const newData = [...this['NavList'+this.navValue]];
                changeCategories(params).then(res =>{
                    if (res.data.code == "200"){
                        this.$message.success(this.$t('pro.EditRules.EditSuccess'))
                        this.getAllData(this.navValue, true);
                    }
                }).catch(e => {console.log(e)})
                  .finally(()=>{
                    const target = newData.filter(item => params.id === item.id)[0];
                    if (target) {
                        delete target.editable;
                    }
                });

            },

            handleDisabled(e) {
                this.disabled = !!this.form.getFieldValue("name") && !!this.form.getFieldValue("iabId")
            },

            removeNav(...ids) {
                delCategories({ids})
                    .then(res=>{
                        if (res.data.code == 200){
                            this.$message.success(this.$t('pro.viewFilterList.delete_Success'));
                            this.getAllData(this.navValue, true);
                        }
                    })
            },
            listDelete() {
              let ids = rowSelection.all.map(item => {
                  return item.id
              });
              this.removeNav(...ids)
            },

            /* 公共添加 */
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.confirming = !this.confirming;
                        values.isGroup = true;
                        values.categoriesGroupId = this.navValue;

                        addCategories(values).then(res =>{
                            if (res.data.code == "200"){
                                this.$message.success(this.$t('pro.viewFilterList.add_Success'))
                                this.getAllData(this.navValue, true);
                                this.form.resetFields();
                            }
                        }).finally(()=>{
                            this.confirming = !this.confirming;
                        })
                    }
                });
            },

            /*公共查询 isAgain='是否需要重新加载数据 '*/
            getAllData(index, isAgain=false) {
                index = index ? index: this.navValue
                if (isAgain || (this['NavList' + index] && this['NavList' + index].length <= 0)) {
                    getAllDataCategories(index).then(res => {
                        this['NavList' + index] = res.data.data || [];
                    });
                }
            }
        },

        computed: {
            getColumns() {
               return this.$t('pro.settings.navsColumns')
            },
            getColumnsNotValue() {
                let arr = this.$t('pro.settings.navsColumns') || [{},{},{}];
                return arr.slice(1,arr.length)
            },
            getTableList() {
                return this['NavList' + this.navValue]
            },
        },

        watch: {
            NavList5(newVal) {
                console.log(newVal);
            }
        },
        created() {
            this.getAllData(1)
        },
    }
</script>
